<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>iTabs Widget</title>
    <link rel="stylesheet" href="../css/style.css" type='text/css' media='all' />
    <link rel="stylesheet" href="../css/iphone.css" type='text/css' media='all' />
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/jquery-ui.js"></script>
    <script type="text/javascript" src="../js/jquery.iphone.js"></script>
    <script type="text/javascript" src="../js/other/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="../js/other/jquery.disable.text.select.js"></script>
    <script type="text/javascript" src="../js/ui/ui.iMenu.js"></script>
    <script type="text/javascript" src="../js/ui/ui.iTabs.js"></script>
    <script type="text/javascript" src="../js/ui/ui.iScroll.js"></script>
</head>

<body>
    <div class="iphone vertical">
    	<div class="phone">
        <div class="display">
            <div class="screen tabs">
                <div class="tab" id="mail" title="Mail">
                    <div class="titlebar">Mail</div>
                    <div class="scroll iscroll">
                        <ul class="imenu">
                            <li><a href="#" title="Label 1" class="arrow">Label 1</a></li>
                            <li><a href="#" title="Label 2">Label 2</a></li>
                            <li><a href="#" title="Label 3">Label 3</a></li>
                            <li><a href="#" title="Label 4">Label 4</a></li>
                        </ul>
                        
                        <ul class="imenu">
                            <li>
                                <a href="#" title="Single" class="arrow icon iicon">
                                    <em class="ii-envelope"></em>
                                    Single
                                    <span>way</span>
                                </a>
                            </li>
                        </ul>
                        <ul class="imenu">
                            <li><a href="#" title="Label 1" class="arrow">Label 1</a></li>
                            <li><a href="#" title="Label 2">Label 2</a></li>
                            <li><a href="#" title="Label 3">Label 3</a></li>
                            <li><a href="#" title="Label 4">Label 4</a></li>
                        </ul>
                        <ul class="imenu">
                            <li><a href="#" title="Label 1" class="arrow">Label 1</a></li>
                            <li><a href="#" title="Label 2">Label 2</a></li>
                            <li><a href="#" title="Label 3">Label 3</a></li>
                            <li><a href="#" title="Label 4">Label 4</a></li>
                        </ul>
                    </div>
                </div>
                <div class="tab" id="chat" title="Chat">
                    <div class="titlebar">Chat</div>
                    <div class="scroll iscroll text">
                    	<ul>
                        	<li><strong>Username1</strong>: Hello!</li>
							<li><strong>Username2</strong>: Hi!</li>
							<li><strong>Username1</strong>: How are you?</li>							
                    	</ul>
                    </div>
                </div>
                <div class="tab" id="search" title="Search">
                    <div class="titlebar">Search</div>
                    <ul class="imenu">
                        <li><a href="#" title="Label 1" class="arrow">Label 1</a></li>
                        <li><a href="#" title="Label 2">Label 2</a></li>
                        <li><a href="#" title="Label 3">Label 3</a></li>
                        <li><a href="#" title="Label 4">Label 4</a></li>
                    </ul>
                </div>
                <div class="tab" id="options" title="Options">
                    <div class="titlebar">Options</div>
                    <ul class="imenu">
                        <li><a href="#" title="Label 1" class="arrow">Label 1</a></li>
                        <li><a href="#" title="Label 2">Label 2</a></li>
                        <li><a href="#" title="Label 3">Label 3</a></li>
                        <li><a href="#" title="Label 4">Label 4</a></li>
                    </ul>
                </div>
            </div>
            <ul class="tabbar itabs">
                <li><a class="iicon" href="#mail" title="Mail"><em class="ii-envelope"></em>Mail</a></li>
                <li><a class="iicon" href="#chat" title="Chat"><em class="ii-chat2"></em>Chat</a></li>
                <li><a class="iicon" href="#search" title="Search"><em class="ii-magnify"></em>Search</a></li>
                <li><a class="iicon" href="#options" title="Options"><em class="ii-gear2"></em>Options</a></li>
            </ul>
        </div>
		</div>
        <a href="/" class="bigbutton">Exit</a>
    </div>
</body>
</html>
